<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/cw.css"/>
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css"/>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery-2.1.4.min.js"></script>
		<script src="../js/global.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../js/public.js" ></script>
		<script type="text/javascript" src="../js/app/yuyue-look.js" ></script>
	</head>
        <style type="text/css">
        	.mui-table-view .mui-media-object{width: 60px;height:60px;max-width: none;}
            .mui-media-body{font-size:15px}
            .docter{color:#8dc21f}
            .mui-table-view-cell p{margin-top: 15px;}
            .mui-ellipsis{font-size:13px;color: #333333;}
            .p-bot{font-size:12px;}
            .font-col{color: #8dc21f;}
            .mui-table-view:after,.mui-table-view:before{height: 0;}
            .mui-content>.mui-table-view:first-child{margin-top: 0;}
            .mui-table-view-cell:after{left: 0;}
            .bot-m{margin-bottom: 5px;}
            .top-div{width: 100%;height: 40px;font-size:15px;background: white;margin-bottom: 5px;overflow: hidden;text-align: center;line-height: 40px;border-bottom: 1px solid #CCCCCC;}
            .left-div{width:50%;border-right: 1px solid #CCCCCC;display: inline-block;float: left;}
            .right-div{width:49%;display: inline-block;float: left;}
            .xhua-zzao{position:fixed;top:84px;left: 0;right: 0;bottom: 0;z-index: 1;display: none;background: #fff;}
            .zuiduo{position:fixed;top:84px;width: 100%;background: white;left: 0;right: 0;z-index: 2;display: none;}
            .add{color:#8dc21f}
            .mui-fullscreen{display:none;position:fixed;top: 84px;left: 0;right: 0;background: white;z-index: 8;height: auto !important;bottom: 42%;}
            .mui-segmented-control .mui-control-item{overflow: initial;}
            .mui-col-xs-3{width:30%}
            .bag{border-bottom: 1px solid #ECECEC !important;width: 100% !important;background: #CCCCCC;}
            .mui-col-xs-9{font-size:15px !important;width:70%}
            .mui-col-9{padding-bottom: 7px !important;}
            /*.bag-col{background: white;}*/
            .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color:#333333}
        </style>
	<body>
		<header id="header" class="mui-bar mui-bar-nav">
		<i class="mui-icon mui-icon-back mui-action-back"></i>
		<h1 class="mui-title"></h1>
	</header>
		<div class="mui-content" id="content">
			<!--预约最多弹窗-->
			<div class="xhua-zzao"></div>
			<div class="mui-table-view zuiduo">
				<li class="mui-table-view-cell mui-text-left" value="0">
					综合排序
				</li>
				<li class="mui-table-view-cell mui-text-left" value="1">
					预约最多
				</li>
				<li class="mui-table-view-cell mui-text-left" value="2">
					评价最高
				</li>
			</div>
<div class="mui-row mui-fullscreen">
	<div class="mui-col-xs-3">
		<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
			<!--<a class="mui-control-item bag mui-active" href="#item1">
				内科系统
			</a>-->
		</div>

	</div>
	<div id="segmentedControlContents" class="mui-col-xs-9">
		<!--<div id="item1" class="mui-control-content mui-active ">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media mui-col-9">
					消化内科1
				</li>
			</ul>
		</div>-->
	</div>
</div>
			<div class="top-div">
				<div class="left-div color add">选择科室</div>
				<div class="right-div color ">综合排序</div>
			</div>
			
		<div class="dlist"></div>
		    <!--<ul class="mui-table-view bot-m">
		        <li class="mui-table-view-cell mui-media">
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left qiehuan" src="../images/icon1.png">
		                <div class="mui-media-body">
		                   <span class="docter">李医生</span>&nbsp; <span>副教授</span>
		                    <p ><span class="p-bot">预约量：1110</span>
		                    	<span class="mui-pull-right mui-icon iconfont">
		                    		<span class="font-col">&#xe608;</span> <span class="font-col">&#xe608;</span> <span class="font-col">&#xe608;</span> <span class="font-col">&#xe608;</span> <span>&#xe608;</span>
		                    	</span>
		                    </p>
		                </div>
		            </a>
		        </li>
		    </ul>-->
		    
		</div>
		
		  
		<script type="text/javascript">
//			mui.init()
            //点击左边
            $('.left-div').on('tap',function(){
            	if($('.mui-fullscreen').css('display') == 'none'){
		           	$('.xhua-zzao').show();
		           	$('.zuiduo').hide();
		           	$('.mui-fullscreen').show();
            	}else{
		           	$('.xhua-zzao').hide();
            		$('.mui-fullscreen').hide();
            	}
            });
            //点击右边
            $('.right-div').on('tap',function(){
            	if($('.zuiduo').css('display') == 'none'){
	           		$('.xhua-zzao').show();
	           		$('.zuiduo').show();
	           		$('.mui-fullscreen').hide();
	           	}else{
	           		$('.xhua-zzao').hide();
	           		$('.zuiduo').hide();
	           	}
            });
            //改变颜色
            $('.color').on('tap',function(){
           		$(this).addClass('add').siblings().removeClass('add');
            });
            //右边的筛选
            $('.mui-text-left').on('tap',function(){
            	$('.right-div').text($(this).text());
            	$('.xhua-zzao').hide();
	           	$('.zuiduo').hide();
	           	$('.mui-fullscreen').hide();
	           	filter($(this).attr('value'));
            });
            
		</script>
	</body>

</html>